/**
 * 通知模板详情
 */
import React from 'react';
import { Form, Spin } from 'antd';
import { useRequest, defaultFormatResult } from '@/hooks';
import FileUpload from '@/components/Custom/FileUpload';
import { BraftTemplate } from './containers';
import { getNoticeTemplate } from './service';
import { transformFileList } from '../utils';
import { TEMPLATE_TYPE } from './constants';
import styles from './index.less';

const NoticeDetail = ({ templateId, type }) => {
    const { data, loading } = useRequest(() => getNoticeTemplate(templateId), {
        refreshDeps: [templateId],
        ...defaultFormatResult
    });

    if (loading) {
        return (
            <div style={{ display: 'flex', justifyContent: 'center', padding: 50 }}>
                <Spin spinning={loading}></Spin>
            </div>
        );
    }

    return (
        <>
            <Form className={styles.noticeDetailWrap}>
                <Form.Item label="模板名称">{data?.templateName || ''}</Form.Item>
                <Form.Item label="邮件主题">{data?.templateTitle || ''}</Form.Item>
                {[TEMPLATE_TYPE.OFFER, TEMPLATE_TYPE.BACKGROUND].includes(type) && (
                    <Form.Item label="适用行政机构">{data?.organizationNames?.replace(/,/g, '、') || ''}</Form.Item>
                )}
                <Form.Item label="邮件正文">
                    <div style={{ position: 'relative' }}>
                        <BraftTemplate
                            readOnly
                            controls={[]}
                            type={type}
                            initialValue={data?.templateContent || ''}
                            contentStyle={{ height: 'auto', minHeight: 250 }}
                        />
                        <div style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, zIndex: 999 }}></div>
                    </div>
                </Form.Item>
                <Form.Item label="邮件附件" className={styles.fileUpload}>
                    <FileUpload value={transformFileList(data?.fileVOS)} disabled>
                        {' '}
                    </FileUpload>
                </Form.Item>
            </Form>
        </>
    );
};

export default NoticeDetail;
